<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box2{
    width: 300px;
    height: 100px;
    background-color: #999;
}
</style>
</head>
<body>

<!-- 行间样式 -->
<div class="box1" style="width: 200px;height: 50px;background-color: #ccc;">box 1</div>

<!-- 非行间样式 -->
<div class="box2">box 2</div>

<script>
var box1 = document.querySelector('.box1');
var box2 = document.querySelector('.box2');

// 设置元素样式：
// box1.style.color = 'red';
// box2.style.color = 'blue';

// 获取元素样式：
// console.log( box1.style.width );// '200px'
// console.log( box2.style.width );// ''
// 通过元素的样式预设对象style只能获取到行间样式，不能获取到元素的非行间样式
// 工作中元素的样式基本都是非行间样式

// getComputedStyle(dom) 获取dom元素计算完成的样式（无需考虑是行间样式还是非行间样式）
// console.log( getComputedStyle(box1) );// {计算完成后的样式预设对象}
// console.log( getComputedStyle(box2) );// {计算完成后的样式预设对象}

console.log( getComputedStyle(box1).width );// '200px'
console.log( getComputedStyle(box2).width );// '300px'

console.log( parseInt( getComputedStyle(box1).width ) );// 200
console.log( parseInt( getComputedStyle(box2).width ) );// 300

</script>
</body>
</html>